<template>
    <div>
        <!--{{this.$store.state.dong}}-->
        <transition :name="animate" mode="out-in">
        <router-view></router-view>
        </transition>
        <audio :src=musicSrc autoplay></audio>
    </div>
</template>

<script>
    import jsonp from 'jsonp'
    export default {
        data() {
            return {
               // animate:'fade'
                newSong:[],//新歌
                hot:[],//热歌
                rock:[],//摇滚
                old:[],//老哥
                foreign:[],//欧美
                mtv:[],//影视金曲
                songList:[],//新歌速递
                singer:[],//歌手列表
                musicSrc:"",//歌曲地址
            }
        },
        methods: {},
        components: {},
        computed:{
            animate(){
                return this.$store.state.dong//获取动画名称
            },
            switchs(){
            	return this.$store.state.switchs;
            },
            songId(){
            	return this.$store.state.selectSong.song_id
            }
        },
        watch:{
        	switchs(newVal,oldVal){
          		var music = document.querySelector("audio");
            	console.log(this.$store.state.switchs)
            	if(music && newVal){
              		music.play();
            	}else{
              		music.pause();
            	}
        	},
        	songId(){
        		jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting/?method=baidu.ting.song.play&songid="+this.$store.state.selectSong.song_id,null,(err,res)=>{
        			if(err){
        				console.log(err)
        			}else{
//      				console.log(res)
        				this.musicSrc = res.bitrate.file_link;
        			}
        		})
        	}
        },
        created(){
        	console.log(JSON.parse(sessionStorage.newSong).data.song_list[0])
        	this.$store.commit("changeselectSong",JSON.parse(sessionStorage.newSong).data.song_list[0])
			console.log(this.asd)
            var nowTime = new Date().getTime();//获取当前时间,注意返回值为毫秒
            if(sessionStorage.newSong&&
                sessionStorage.hot&&
                sessionStorage.rock&&
                sessionStorage.old&&
                sessionStorage.foreign&&
                sessionStorage.songList&&
                sessionStorage.mtv&&
                sessionStorage.singer
            ){//判断之前是否已经存储了hotMovie信息
                var tem1 = JSON.parse(sessionStorage.newSong);//将存储的信息转化未json对象格式
                var tem2 = JSON.parse(sessionStorage.hot);
                var tem3 = JSON.parse(sessionStorage.rock);
                var tem4 = JSON.parse(sessionStorage.old);
                var tem5 = JSON.parse(sessionStorage.foreign);
                var tem6 = JSON.parse(sessionStorage.mtv);
                var tem7 = JSON.parse(sessionStorage.songList);
                var tem8 = JSON.parse(sessionStorage.singer);
                if(nowTime - tem1.expir<3600000 &&
                    nowTime - tem2.expir<3600000&&
                    nowTime - tem3.expir<3600000 &&
                    nowTime - tem4.expir<3600000 &&
                    nowTime - tem5.expir<3600000 &&
                    nowTime - tem6.expir<3600000 &&
                    nowTime - tem7.expir<3600000 &&
                    nowTime - tem8.expir<3600000
                ){//判断存储信息的时间和当前时间的距离是否小于1小时
                    //如果信息已经存在了sessionStroage里面就直接获取，否则进行ajax请求获取
                    this.newSong = tem1.data;
                    this.hot = tem2.data;
                    this.rock = tem3.data;
                    this.old = tem4.data;
                    this.foreign = tem5.data;
                    this.mtv = tem6.data;
                    this.songList = tem7.data;
                    this.singer = tem8.data;
//                  console.log(this.newSong)
//                  console.log(this.old)
//                  console.log(this.singer)
//                  console.log(this.$store.state.list1[1])
                    return;//小于1h就直接return，不再执行ajaj请求
                }
            }
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=1&offset=0&size=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem1){
                        this.newSong = tem1.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.newSong = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.newSong = res;
                }
            })
            //热歌
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=2&offset=0&size=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem2){
                        this.hot = tem2.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.hot = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.hot = res;
                }
            })
            //摇滚11
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=11&offset=0&size=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem3){
                        this.rock = tem3.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.rock = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.rock = res;
                }
            })
            //欧美21
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=21&offset=0&size=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem4){
                        this.foreign = tem4.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.foreign = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.foreign = res;
                }
            })
            //老哥22
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=22&offset=0&size=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem5){
                        this.hotMovie = tem5.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.old = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.old = res;
                }
            })
            /
            //影视24
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.billboard.billList&format=json&type=24&offset=0&size=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem6){
                        this.mtv = tem6.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.mtv = JSON.stringify({//把json对象格式转化为字符串
                        "data":res,
                        "expir":new Date().getTime()
                    });
                    this.mtv = res;
                }
            })
            //歌曲列表
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.plaza.getNewSongs&format=json&limit=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem7){
                        this.songList = tem7.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.songList = JSON.stringify({//把json对象格式转化为字符串
                        "data":res.song_list,
                        "expir":new Date().getTime()
                    });
                    this.songList = res.song_list;
                }
            })
            //艺人列表
            jsonp("http://tingapi.ting.baidu.com/v1/restserver/ting?from=qianqian&version=2.1.0&method=baidu.ting.artist.get72HotArtist&format=jsonℴ=1&offset=0&limit=50",null,(err,res)=>{
                if(err){
                    console.log(err)
                    if(tem8){
                        this.singer = tem8.data;//如果请求失败就用之前存储的值
                    }

                }else{

                    sessionStorage.singer = JSON.stringify({//把json对象格式转化为字符串
                        "data":res.artist,
                        "expir":new Date().getTime()
                    });
                    this.singer = res.artist;

                }
            })

        }
    }

</script>

<style scoped lang="scss">
    .web{
        width: 100%;
        height: 100%;
    }
    .fade-enter-active,.fade-leave-active{
        transition: all .1s;
        transform-origin: 50% 10%;
    }
    .fade-enter,.fade-leave-to{
        opacity: 0;
        transform: translateX(-100%);
    }
    .up-enter-active,.up-leave-active{
        transition: all .1s;
        transform-origin: 50% 10%;
    }
    .up-enter,.up-leave-to{
        opacity: 0;
        transform: translateY(-100%);
    }

</style>